<%@ include file="/WEB-INF/views/commons/header.jsp" %>
<%@ include file="/WEB-INF/views/commons/menu.jsp" %>
<!-- START BODY -->
<link href="<pc:GetUrlUriTags value="/resources/css/search/search.css" />" media="screen" rel="stylesheet" type="text/css" />
<table class="topSubject" width="100%" border="0">  
  <tr>
    <td height="30px"  width="34px">
    	<img alt="" src="<pc:GetUrlUriTags value="/resources/image/icons/png_apps/32x32/cloud-1.png" />" style="text-decoration: none; border-width: 0px;">
    </td>
    <td height="30px" align="left">
    	<div>
			<strong><a href="<pc:GetUrlUriTags value="/sd/outbound/sales/customer/index" />" class="topSubjectText">
			&nbsp;Customer Master Outbound
			</a></strong>
		</div>
    </td>
  </tr>
</table>

<div class="topSubject" style="width: 100%; height:auto; vertical-align: middle; text-align: center;">
<form:form id="ObjectForm-form"  modelattribute="ObjectForm" commandName="ObjectForm" method="post" action="search" >
<table class="topSubject" style="display: inline-block;">
	<tr>
		<td style="vertical-align: middle; text-align:center; width: 150px;">
			<div class="topLeftSearchCriteria">Search by Criteria</div>
		</td>
		<td>
			<div style="border-width: 1px; border-color: #D8D8D8; border-style: solid; padding: 5px; ">			
				<table width="100%" class="topSubject">
				  <tr>				  	
				  	<td>
						<label class="labelSearch">Customer Code</label>
						<form:input path="customerCode" cssClass="txtSearch"  autofocus="autofocus"/>
						<form:errors path="customerCode" cssClass="error"></form:errors>
				  	</td>					
				  	<td>
						<label class="labelSearch">Citizen Code</label>
						<form:input path="idNo" cssClass="txtSearch"  autofocus="autofocus"/>
						<form:errors path="idNo" cssClass="error"></form:errors>
				  	</td>
				  	<td>
						<label class="labelSearch">Tax ID.</label>
						<form:input path="taxId" cssClass="txtSearch"  autofocus="autofocus"/>
						<form:errors path="taxId" cssClass="error"></form:errors>
				  	</td>				  	
				  	<td>
						<label class="labelSearch">Customer Name.</label>
						<form:input path="customerName" cssClass="txtSearch"  autofocus="autofocus"/>
						<form:errors path="customerName" cssClass="error"></form:errors>
				  	</td>				  	
				  	<td>&nbsp;</td>
				  </tr>
				  <tr>				  	
				  	<td>
						<label class="labelSearch">Staging Id</label>
						<form:input path="stagingId" cssClass="txtSearch"  autofocus="autofocus"/>
						<form:errors path="stagingId" cssClass="error"></form:errors>
				  	</td>
				  	<td>
						<label class="labelSearch">Instance No.</label>
						<form:input path="instanceNo" cssClass="txtSearch"  autofocus="autofocus"/>
						<form:errors path="instanceNo" cssClass="error"></form:errors>
				  	</td>
				  	<td colspan="2">
				  		<div style="border-width: 1px; border-color: #D8D8D8; border-style:dashed; padding-bottom: 4px; margin-bottom: 0px; ">
					  		<label class="labelSearch">Interface Date [START - END]</label>
							<form:input path="syncCreatedOnStart" value="" cssClass="txtSearch"  autofocus="autofocus"/> - <form:input path="syncCreatedOnEnd" cssClass="txtSearch"  autofocus="autofocus"/>
							<form:errors path="syncCreatedOnStart" cssClass="error"></form:errors>				<form:errors path="syncCreatedOnEnd" cssClass="error"></form:errors>
						</div>
				  	</td>
				  	<td>
				  		<label class="labelSearch">Max Result</label>
						<form:input path="maxResult" cssClass="txtSearch"  autofocus="autofocus"/>
						<form:errors path="maxResult" cssClass="error"></form:errors>
				  	</td>
				  </tr>
				</table>			
			</div>
		</td>
		<td>
			<input id="btnSearch" type="submit" style="margin-left: 10px;" class="button round blue image-right ic-right-arrow" value="Search" />
		</td>
	</tr>
</table>
</form:form>

<link href="<pc:GetUrlUriTags value="/resources/kendoui.web.2013.2.716/content/shared/styles/examples-offline.css" />" rel="stylesheet" />
<link href="<pc:GetUrlUriTags value="/resources/kendoui.web.2013.2.716/styles/kendo.common.css" />" rel="stylesheet" />
<link href="<pc:GetUrlUriTags value="/resources/kendoui.web.2013.2.716/styles/kendo.default.css" />" rel="stylesheet" />
<script src="<pc:GetUrlUriTags value="/resources/kendoui.web.2013.2.716/js/jquery.min.js" />" ></script>
<script src="<pc:GetUrlUriTags value="/resources/kendoui.web.2013.2.716/js/kendo.web.js" />" ></script>
<script src="<pc:GetUrlUriTags value="/resources/kendoui.web.2013.2.716/content/shared/js/console.js" />" ></script>
	<div id="example" class="k-content">
            <div id="grid"></div>
            
            <div id="details"></div>
            <script>
			
				$(document).ready(function() {
				 	setValue = function () {
                        calendar.value($("#syncCreatedOnStart").val());
                    };
                    $("#syncCreatedOnStart").kendoDatePicker({
                        format : "yyyy-MM-dd",
                        change: setValue
                    });
					
					setValue = function () {
                        calendar.value($("#syncCreatedOnEnd").val());
                    };
                    $("#syncCreatedOnEnd").kendoDatePicker({
                    	format : "yyyy-MM-dd",
                        change: setValue
                    });
                }); 
				
				
				$(document).ready(function() {
					fnSearch();
					//alert("already !!!");			 	
                });
                				
            	function fnSearch(){
                	var param_p = "stagingId=" + $("#stagingId").val();
                	param_p += "&customerCode=" + $("#customerCode").val();
                	param_p += "&customerName=" + $("#customerName").val();
                	param_p += "&idNo=" + $("#idNo").val();            
                	param_p += "&taxId=" + $("#taxId").val();        
                	param_p += "&instanceNo=" + $("#instanceNo").val();
                	param_p += "&syncCreatedOnStart=" + $("#syncCreatedOnStart").val();            
                	param_p += "&syncCreatedOnEnd=" + $("#syncCreatedOnEnd").val();
                	param_p += "&maxResult=" + $("#maxResult").val();
                	
                	var dataSource_p = getDataSource(param_p);
					GridBuilding(dataSource_p);
					adjuestScreen();		
                }

                function getDataSource(param) {				
					var url_p = "<pc:GetUrlUriTags value='/sd/outbound/sales/customer/search/json' />";
					if(param != null)
						url_p += "?" + param;
						
                	var  dataSource = new kendo.data.DataSource({
                         type: "json",
                         transport: {
                         	read: {
                             		url : url_p,
                             		dataType: "json"
                            }
                         },
                         schema: {
                             model: {
                                 fields: {
                                	msgCode: { type: "string" },
                                	Id: { type: "string" },
                                    accountgroup: { type: "string" },
                                    city: { type: "string" },
                                    country: { type: "string" },
                                    createby: { type: "string" },
                                    createon: { type: "string" },
                                    cusStatusGrp: { type: "string" },
                                    customer: { type: "string" },
                                    customergroup: { type: "string" },
                                    distributionchannel: { type: "string" },
                                    district: { type: "string" },
                                    division: { type: "string" },
                                    dunprocedure: { type: "string" },
                                    email: { type: "string" },
                                    extRefKey: { type: "string" },
                                    extRefNo: { type: "string" },
                                    fax: { type: "string" },
                                    instanceNo: { type: "string" },
                                    mobilePhone: { type: "string" },
                                    msgAltDesc: { type: "string" },
                                    msgDesc: { type: "string" },
                                    name1: { type: "string" },
                                    name2: { type: "string" },
                                    name3: { type: "string" },
                                    name4: { type: "string" },
                                    paymentTerm: { type: "string" },
                                    postcode: { type: "string" },
                                    reconAccount: { type: "string" },
                                    salesDistrict: { type: "string" },
                                    salesOffice: { type: "string" },
                                    sapStagingId: { type: "string" },
                                    searchterm: { type: "string" },
                                    street: { type: "string" },
                                    street4: { type: "string" },
                                    street5: { type: "string" },
                                    syncCreatedby: { type: "string" },
                                    syncCreatedon: { type: "string" },
                                    syncIssync: { type: "string" },
                                    syncUpdatedby: { type: "string" },
                                    syncUpdatedon: { type: "string" },
                                    taxClassification: { type: "string" },
                                    taxcode1: { type: "string" },
                                    taxcode3: { type: "string" },
                                    telephone: { type: "string" },
                                    title: { type: "string" },
                                    useMinute: { type: "string" },
                                    useSecond: { type: "string" },
                                    pmsUseEnd: { type: "string" },
                                    pmsUseStart: { type: "string" },
                                    procEndTime: { type: "string" },
                                    procStartTime: { type: "string" },
                                    procUseTime: { type: "string" },
                                    processAction: { type: "string" },
                                    processLevel: { type: "string" },
                                    processingCount: { type: "string" },
                                    processingName: { type: "string" },
                                    updateby: { type: "string" },
                                    updateon: { type: "string" },                                    
									syncCreatedonToString: { type: "string" },
									syncUpdatedonToString: { type: "string" }
                                 }
                             }
                         },
                         pageSize: 200,
                         serverPaging: false,
                         serverFiltering: false,
                         serverSorting: false                         
                     });
					 return dataSource;
                }
                
                var wnd;
				
				function GridBuilding(dataSource_p){
					$("#grid").kendoGrid({
                        dataSource: dataSource_p,
                        height: 430,                        
                        scrollable: true,
                        sortable: true,
                        filterable: true,
                        reorderable: true,
                        resizable: true,
                        pageable: {
                        	refresh: true,
                            input: true,
                            numeric: false
                        },
                        columns: [{	field:"msgCode", title: "Msg Code" , width: 80, filterable: true },
                                  { field:"Id" , width: 180, filterable: true },
                                  { field:"accountgroup" , width: 180, filterable: true },
                                  { field:"city" , width: 180, filterable: true },
                                  { field:"country" , width: 180, filterable: true },
                                  { field:"createby" , width: 180, filterable: true },
                                  { field:"createon" , width: 180, filterable: true },
                                  { field:"cusStatusGrp" , width: 180, filterable: true },
                                  { field:"customer" , width: 180, filterable: true },
                                  { field:"customergroup" , width: 180, filterable: true },
                                  { field:"distributionchannel" , width: 180, filterable: true },
                                  { field:"district" , width: 180, filterable: true },
                                  { field:"division" , width: 180, filterable: true },
                                  { field:"dunprocedure" , width: 180, filterable: true },
                                  { field:"email" , width: 180, filterable: true },
                                  { field:"extRefKey" , width: 180, filterable: true },
                                  { field:"extRefNo" , width: 180, filterable: true },
                                  { field:"fax" , width: 180, filterable: true },
                                  { field:"instanceNo" , width: 180, filterable: true },
                                  { field:"mobilePhone" , width: 180, filterable: true },
                                  { field:"msgAltDesc" , width: 180, filterable: true },
                                  { field:"msgCode" , width: 180, filterable: true },
                                  { field:"msgDesc" , width: 180, filterable: true },
                                  { field:"name1" , width: 180, filterable: true },
                                  { field:"name2" , width: 180, filterable: true },
                                  { field:"name3" , width: 180, filterable: true },
                                  { field:"name4" , width: 180, filterable: true },
                                  { field:"paymentTerm" , width: 180, filterable: true },
                                  { field:"postcode" , width: 180, filterable: true },
                                  { field:"reconAccount" , width: 180, filterable: true },
                                  { field:"salesDistrict" , width: 180, filterable: true },
                                  { field:"salesOffice" , width: 180, filterable: true },
                                  { field:"sapStagingId" , width: 180, filterable: true },
                                  { field:"searchterm" , width: 180, filterable: true },
                                  { field:"street" , width: 180, filterable: true },
                                  { field:"street4" , width: 180, filterable: true },
                                  { field:"street5" , width: 180, filterable: true },
                                  { field:"syncCreatedby" , width: 180, filterable: true },
                                  { field:"syncCreatedon" , width: 180, filterable: true },
                                  { field:"syncIssync" , width: 180, filterable: true },
                                  { field:"syncUpdatedby" , width: 180, filterable: true },
                                  { field:"syncUpdatedon" , width: 180, filterable: true },
                                  { field:"taxClassification" , width: 180, filterable: true },
                                  { field:"taxcode1" , width: 180, filterable: true },
                                  { field:"taxcode3" , width: 180, filterable: true },
                                  { field:"telephone" , width: 180, filterable: true },
                                  { field:"title" , width: 180, filterable: true },
                                  { field:"useMinute" , width: 180, filterable: true },
                                  { field:"useSecond" , width: 180, filterable: true },
                                  { field:"pmsUseEnd" , width: 180, filterable: true },
                                  { field:"pmsUseStart" , width: 180, filterable: true },
                                  { field:"procEndTime" , width: 180, filterable: true },
                                  { field:"procStartTime" , width: 180, filterable: true },
                                  { field:"procUseTime" , width: 180, filterable: true },
                                  { field:"processAction" , width: 180, filterable: true },
                                  { field:"processLevel" , width: 180, filterable: true },
                                  { field:"processingCount" , width: 180, filterable: true },
                                  { field:"processingName" , width: 180, filterable: true },
                                  { field:"updateby" , width: 180, filterable: true },
                                  { field:"updateon" , width: 180, filterable: true },
                                  /*
                                  { command: { text: "Send", click: showDetails }, title: " ", width: "140px" },
                                  */
                                  {	field:"syncCreatedonToString", title: "Staging Date" , width: 150, filterable: true },
                                  {	field:"syncUpdatedonToString", title: "Interface Date" , width: 150, filterable: true }
                        ]
                    });
					
					wnd = $("#details")
                    .kendoWindow({
                        title: "Customer Details",
                        modal: true,
                        visible: false,
                        resizable: false,
                        width: 300
                    }).data("kendoWindow");
				}
				
				function showDetails(e) {
					alert("showDetails");
                    e.preventDefault();

                    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                    wnd.content(detailsTemplate(dataItem));
                    wnd.center().open();
                    
                }
				
            </script>
        </div>

</div>

<!-- END BODY -->
<%@ include file="/WEB-INF/views/commons/footer.jsp" %>